<!-- 个人中心 -->
<template>
  <ContainerLayout>
    <div class="form-table-layout">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="个人信息" name="info">
          <div style="max-width: 500px">
            <FormUpdateInfo />
          </div>
        </el-tab-pane>
        <el-tab-pane label="密码" name="password">
          <div style="max-width: 300px">
            <FormUpdatePassword />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </ContainerLayout>
</template>
<script setup lang="ts">
import ContainerLayout from '../layout/ContainerLayout.vue'
import { ref, onMounted, nextTick } from 'vue'
import { useRoute } from 'vue-router'
import type { TabsPaneContext } from 'element-plus'
import FormUpdateInfo from '../components/PersonalCenter/FormUpdateInfo.vue'
import FormUpdatePassword from '../components/PersonalCenter/FormUpdatePassword.vue'

// const router = useRouter()

const route = useRoute()
const type = ref(route.params.type)
const activeName = ref('info')
const handleClick = (tab: TabsPaneContext) => {
  if (tab.paneName === undefined) {
    return
  }
  const paneName = String(tab.paneName)
  activeName.value = paneName
  // router.push({ name: 'PersonalCenter', params: { type: paneName } })
  focusOnActiveTab(paneName)
}
const focusOnActiveTab = (paneName: string) => {
  nextTick(() => {
    const activeTab = document.querySelector(`.el-tabs__content .el-tab-pane[aria-labelledby="tab-${paneName}"]`)
    if (activeTab) {
      const focusableElements = activeTab.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')
      if (focusableElements.length > 0) {
        // 确保焦点只移到可见且可交互的元素上
        const firstVisibleElement = Array.from(focusableElements).find((el) => !el.closest('[aria-hidden="true"]'))
        if (firstVisibleElement) {
          ;(firstVisibleElement as HTMLElement).focus()
        }
      }
    }
  })
}

onMounted(() => {
  nextTick(() => {
    if (type.value) {
      activeName.value = type.value as string
    }
  })
})
</script>
